<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <#include "../../common/header.ftl">

    <link rel="stylesheet" href="${base}/res/js/bootstrap-fileinput/css/fileinput.min.css" crossorigin="anonymous">
    <script src="${base}/res/js/bootstrap-fileinput/js/fileinput.min.js" type="text/javascript"></script>
    <script src="${base}/res/js/bootstrap-fileinput/js/locales/zh.js" type="text/javascript"></script>
</head>
<body>
<input type="hidden" id="driverId" value="${driverId!}">
<div class="container-fluid">
    <#include "../../common/left-nav.ftl">
    <form class="form-horizontal" id="dataForm">
        <div class="main-box">
            <ol class="breadcrumb crumbs always-top">
                <li><a href="${base}/admin/driver">司机管理</a></li>
                <li class="active">编辑</li>

                <div class="form-btns">
                    <button type="submit" class="btn btn-primary btn-sm">
                        <span class="glyphicon glyphicon-floppy-disk"></span> 保存
                    </button>

                    <button type="button" class="btn btn-danger btn-sm">
                        <span class="glyphicon glyphicon-remove"></span> 取消
                    </button>
                </div>
            </ol>


            <div class="container-fluid">
                <div class="detail-div">
                    <div class="avatar-form">
                        <div class="driver-avatar">
                            <img src="${base}/res/images/no_pic.png" id="avatarImg">
                            <input type="hidden" name="avatarPath" id="avatarImgId" data-file-flag="avatarImg">
                        </div>

                        <div class="btn-box">
                            <input id="f_upload" type="file" name="file" class="file-input" data-target="avatarImg"
                                   accept="image/*"/>
                        </div>
                    </div>

                    <div class="driver-details">
                        <div class="panel panel-info panel-freight">
                            <div class="panel-heading"><b>基础信息</b></div>
                            <div class="panel-body">
                                <div class="details-panel">
                                    <div class="item">
                                        <div class="form-group">
                                            <label for="carNumber" class="col-sm-2 control-label">姓名</label>
                                            <div class="col-sm-10">
                                                <input type="text" class="form-control" name="realName"
                                                       placeholder="请输入司机姓名" required>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="item">
                                        <div class="form-group">
                                            <label for="carNumber" class="col-sm-2 control-label">身份证号</label>
                                            <div class="col-sm-10">
                                                <input type="text" class="form-control" name="identityNo"
                                                       data-verification-type="idCard"
                                                       placeholder="请输入司机身份证号码" required>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="item">
                                        <div class="form-group">
                                            <label for="carNumber" class="col-sm-2 control-label">电话</label>
                                            <div class="col-sm-10">
                                                <input type="text" class="form-control" name="tel" required
                                                       data-verification-type="mobile"
                                                       placeholder="请输入司机联系电话，例：13000000000">
                                            </div>
                                        </div>
                                    </div>

                                    <div class="item">
                                        <div class="form-group">
                                            <label for="carNumber" class="col-sm-2 control-label">联系地址</label>
                                            <div class="col-sm-10">
                                                <input type="text" class="form-control" name="address"
                                                       placeholder="请输入联系地址，例：成都市XXXXXXX">
                                            </div>
                                        </div>
                                    </div>

                                    <div class="item">
                                        <div class="form-group">
                                            <label for="carNumber" class="col-sm-2 control-label">运输经营许可</label>
                                            <div class="col-sm-10">
                                                <input type="text" class="form-control" name="transportLicense"
                                                       placeholder="请输入运输经营许可" required>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="item">
                                        <div class="form-group">
                                            <label for="practicing" class="col-sm-2 control-label">从业资格证</label>
                                            <div class="col-sm-10">
                                                <input type="text" class="form-control" id="practicing"
                                                       name="practicing" required
                                                       placeholder="请输入从业资格证">
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="panel panel-info panel-freight">
                            <div class="panel-heading"><b>证件信息</b></div>
                            <div class="panel-body">
                                <div class="details-panel">
                                    <div class="row">
                                        <div class="col-md-4">
                                            <div class="image-box">
                                                <input type="hidden" name="identityPath" id="identityPathId"
                                                       data-file-flag="identityPath">
                                                <img src="${base}/res/images/no_pic.png" id="identityPath">
                                                <span class="title">身份证</span>
                                            </div>
                                            <div class="btn-box">
                                                <input type="file" name="file" class="file-input"
                                                       data-target="identityPath" accept="image/*"/>
                                            </div>
                                        </div>

                                        <div class="col-md-4">
                                            <div class="image-box">
                                                <input type="hidden" name="transportLicensePath"
                                                       data-file-flag="transportLicensePath"
                                                       id="transportLicensePathId">
                                                <img src="${base}/res/images/no_pic.png" id="transportLicensePath">
                                                <span class="title">运输经营许可证</span>
                                            </div>
                                            <div class="btn-box">
                                                <input type="file" name="file" class="file-input"
                                                       data-target="transportLicensePath" accept="image/*"/>
                                            </div>
                                        </div>

                                        <div class="col-md-4">
                                            <div class="image-box">
                                                <input type="hidden" name="practicingPath" id="practicingPathId"
                                                       data-file-flag="practicingPath">
                                                <img src="${base}/res//images/no_pic.png" id="practicingPath">
                                                <span class="title">从业资格证</span>
                                            </div>
                                            <div class="btn-box">
                                                <input type="file" name="file" class="file-input"
                                                       data-target="practicingPath" accept="image/*"/>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

            </div>
        </div>
    </form>
</div>
</body>
</html>

<script type="text/javascript">
    var driverId;
    $(document).ready(function () {
        var fileInput = $(".file-input");
        fileInput.fileinput({
            overwriteInitial: true,
            maxFileSize: 1500,
            language: 'zh',
            showCaption: false,
            showPreview: false,
            showRemove: false,
            showUpload: false,
            showCancel: false,
            showClose: false,
            dropZoneEnabled: false,
            allowedFileTypes: ['image'],
            uploadUrl: $('#base').val() + "/file"
        }).on("filebatchselected", function (event, files) {
            $(this).fileinput("upload");
        }).on('filepreupload', function (event, data, previewId, index) {
            showLoading('文件上传中');
        }).on('fileuploaded', function (event, data, previewId, index) {
            var target = $(this).data("target");
            if (target && target !== '') {
                var $target = $('#' + target);
                var resp = data.response;
                if (resp.code === 'SUCCESS') {
                    var obj = resp.obj;
                    var imageUrl = $('#base').val() + '/file/image/' + obj.id;
                    $('#' + target + 'Id').val(obj.id);
                    $target.attr('src', imageUrl);
                }
            }
            bootbox.hideAll();
        });

        driverId = $('#driverId').val();
        if (driverId) {
            $.httpclient.get(API_UCENTER_DRIVER + '/' + driverId, {
                time: new Date().getTime()
            }, function (data) {
                if (data.code === 'SUCCESS') {
                    var formData = data.obj;
                    var basePath = $('#base').val() + '/';
                    $('#dataForm').find('input').each(function () {
                        if (formData[this.name]) {
                            this.value = formData[this.name];
                            var fileFlag = $(this).data('file-flag');
                            if (fileFlag && this.value) {
                                $('#' + fileFlag).attr('src', basePath + 'file/image/' + this.value);
                            }

                        }
                    });
                }
            })
        }

        $('#dataForm').submit(function (data) {
            var target = data.target;
            var formData = {};

            var fieldInputs = $(target).find('input');
            for (var i = 0; i < fieldInputs.length; i++) {
                var item = fieldInputs[i];

                if ($(item).attr('data-verification-type')==='mobile'){
                    if(checkPhone(item.value)){
                        bootbox.alert('手机号码有误');
                        return false;
                    }
                }

                if ($(item).attr('data-verification-type')==='idCard'){
                    if(checkIdCard(item.value)){
                        bootbox.alert('身份证号码有误');
                        return false;
                    }
                }

                if (item.name && item.name !== '') {
                    formData[item.name] = item.value;
                }
            }

            formData['id'] = driverId;
            if (driverId && driverId !== '') {
                $.httpclient.put(API_UCENTER_DRIVER, JSON.stringify(formData), function (data) {
                    location.href = $('#base').val() + '/admin/driver/' + driverId;
                })
            } else {
                $.httpclient.post(API_UCENTER_DRIVER, JSON.stringify(formData), function (data) {
                    location.href = $('#base').val() + '/admin/driver/' + driverId;
                })
            }
            return false;
        });
    })
</script>
